<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">人事信息列表</h3>
                  <div class="box-tools pull-right">
                    <el-button type="success" @click="showQuery">
                      <i class='fa fa-search'>高级查询</i>
                    </el-button >
                    <el-button type="primary" @click='()=>isExport = true'>
                      <i class='fa fa-cloud-download'>导出当前结果</i>
                    </el-button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="departEmployees">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="users" border style="width: 100%">
                        <el-table-column fixed type='index' label="序号" :index="indexMethod" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                          <template scope="scope">
                            <el-button type="success" @click="view(scope.row)">
                              <i class="fa fa-eye">查看</i>
                            </el-button>
                            <el-button type="primary" v-if="util.hasRole(1)" @click="editRow(scope.row)">
                              <i class="fa fa-edit">编辑</i>
                            </el-button>
                            <el-button type="warning" v-if="util.hasRole(1)" @click="deleteRow(scope.row)">
                              <i class="fa fa-trash">删除</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title='高级查询' :visible.sync="queryVisible" :before-close="()=>queryVisible = false" :modal="false" size="small">
      <UserQuery ref='userQuery'></UserQuery>
      <span slot="footer" class="dialog-footer">
        <el-button @click="queryVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submit">查 询</el-button>
      </span>
    </el-dialog>

    <el-dialog title='年度考核管理' :visible.sync="viewVisible" :before-close="()=>viewVisible = false"  :modal="false" size="large">
      <KPI  ref='kpiView' :editable='false' :kpis='selectedUser.data.kpis'></KPI>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
   
   <el-dialog title="年度考核管理" :visible.sync="editVisible" :before-close="()=>editVisible = false"  :modal="false" size="large">
      <KPI ref='kpiEdit' :editable='true' :kpis='selectedUser.data.kpis'></KPI>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">关 闭</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='提交审核' v-if="approve" :visible.sync="approve" :before-close="()=>approve = false" :modal="true" width="20%">
      <ApproveReq ref="approveReq"></ApproveReq>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doDispatch">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='导出数据' v-if="isExport" :visible.sync="isExport" :before-close="()=>isExport = false" :modal="true" width="20%">
      <ExportUserData ref='exportUserDataView'></ExportUserData>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportdata">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import Utils from "../../../common/utils"
import PersonUtils from "../../../common/personUtils"
import approveUtils from "../../../common/approveUtils"
import UserQuery from "../../mycomponents/users/userQuery"
import ExportUserData from "../../mycomponents/users/ExportUserData"
import ApproveReq from '../../mycomponents/approve/approveReq'
import KPI from "../../mycomponents/users/KPI"
let approveUtil = new approveUtils()
let util = new Utils()
let personUtil = new PersonUtils()
export default {
  name: 'kpiView',
  components: {
    UserQuery,
    KPI,
    ApproveReq,
    ExportUserData
  },
  data() {
    return {
      name: '',
      queryVisible:false,
      editVisible: false,
      viewVisible:false,
      columns: util.getUsersColumns(),
      emptyText: '空',
      id: 'id',
      names: [],
      query: {
        birtFrom: { time: '' },
        birtTo: { time: '' }
      },
      util:util,
      departs: null,
      queryData: util.getDefaultUserQueryData(4),
      users: [],
      total: 1,
      pageSizes: [10, 20, 30, 40, 50],
      pagesize: 10,
      currentPage: 1,
      selectedUser: util.getDefaultSelectedUser(),
      approve:false,
      operation:'',
      isExport:false
    }
  },
  created: function() {
    this.$nextTick(() => {
      this.getData()
      approveUtil.listApprover()
    })
  },
  methods: {
    getEmptyText() {
      return '空'
    },
    showQuery(){
      this.queryVisible = true
    },
    view(row) {
      console.log('view data:' + JSON.stringify(row))
      var that = this
      this.getUser(row.id, function(data) {
        if(util.parseData(data, that.selectedUser.data,that))
        that.viewVisible = true
      });
    },
    editRow(row) {
      console.log('edit data:' + JSON.stringify(row))
      var that = this
      this.getUser(row.id, function(data) {
        if(util.parseData(data, that.selectedUser.data,that))
        that.editVisible = true
      });
    },
    sortChanged(sortProp) {
      this.queryData.orders.fields = sortProp.prop
      this.queryData.orders.desc = sortProp.order
    },
    getUser(id, callback) {
      var that = this
      util.getUserData(id, (response) => {
        if (response.body.result == 1) {
          console.log('get user data id ' + JSON.stringify(response.body));
          callback(response.body.body)
        }
      }, (response) => {
        console.log('get user failed:' + response.data)
      })
    },
    getData() {
      var that = this
      util.queryUserData(this.queryData,function(response) {
        that.users = response.body.body.rows
        that.total = response.body.body.total
      }, function(response) {
        console.log('query failed:' + response.data)
      })
    },
    submit(e) {
      this.queryVisible = false
      this.queryData.conditions = this.$refs.userQuery.getData()
      this.queryData.page.count = this.pagesize
      this.currentPage = 1
      this.queryData.page.number = this.currentPage -1
      this.getData()
    },
    indexMethod(index){
      return this.pagesize * (this.currentPage -1) + index + 1
    },
    exportdata() {
      var filename = this.$refs.exportUserDataView.getData()
      if(filename){
        personUtil.exportData(this.queryData,filename.fileName)
        this.isExport = false
      }
    },
    showSucInfo(info){
      this.$message({
        message: info,
        type: 'info'
      });
    },
    showErrorInfo(info){
      this.$message({
        message: info,
        type: 'error'
      });
    },
    doDispatch(){
      var that = this
      personUtil.dispatch(this,this.selectedUser.data,(response)=>{
        if (response.body.result == 1){
          that.approve=false
          that.showSucInfo('操作成功!')
          that.getData()
          if(that.editVisible){
            that.editVisible = false
          }
        }
        else{
          that.showErrorInfo('操作失败,请稍后重试!')
        }
      },(response)=>{
        that.showErrorInfo('网络异常,请稍后重试!')
      })
    },
    getOperation(){
      return this.operation
    },
    update() {
      this.operation = 'update'
      if(util.hasRole(4)){
        this.doDispatch()
      }
      else{
        this.operation = 'update'
         this.approve = true;
      }
    },
    deleteRow(row) {
      var that = this
      this.operation = 'delete'
      this.getUser(row.id, function(data) {
        if(util.parseData(data, that.selectedUser.data,that))
        if(util.hasRole(4)){
          util.deleteConf(that,()=>{
            console.log("delete resume");
            that.doDispatch()
          })
        }
        else{
          that.approve = true
        }
      });
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.queryData.page.count = this.pagesize
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryData.page.number = this.currentPage -1
      this.getData()
    }
  }
}
</script>
